<script lang="ts" setup>
import { ref } from 'vue'
import { ElUpload } from 'element-plus'
import Utility from '@/utils'
const emit = defineEmits(['accept'])
const fileList = ref([])
defineProps({
  uploadButttonName: {
    type: String,
    default: '上传',
  },
  maxLength: {
    type: Number,
    default: 1,
  },
  accept: {
    type: String,
    default: '',
  },
})

const handleRemove = () => {
  emit('accept', '')
}
defineExpose({ fileList })
async function uploadRequest(file, list) {
  const { uploadUrl } = await Utility.uploadFileV2(file.file)
  emit('accept', uploadUrl)
  fileList.value = [
    {
      url: uploadUrl,
      name: file.file.name,
    },
  ]
}
</script>
<template>
  <el-upload
    v-model:file-list="fileList"
    :on-remove="handleRemove"
    :limit="maxLength"
    :accept="accept"
    :http-request="uploadRequest"
  >
    <el-button type="primary">{{ uploadButttonName }}</el-button>
  </el-upload>
</template>
